<template>
  <div class="pet-card">
    <div class="pet-image" @click="imageViewer({initialIndex: 0,urlList: [inInfo.face]})">
      <el-image style="width: 100%; height: 100%" :src="inInfo.face" fit="cover" />
    </div>
    <div class="pet-info">
      <p class="name">
        {{ inInfo.name }}
      </p>
      <p class="variety">
        <span>{{ inInfo.breedName }}</span>
        <el-icon class="gender" v-if="inInfo.sex===1" color="#fc37ff"><Female /></el-icon>
        <el-icon class="gender" v-else color="#3799ff"><Male /></el-icon>
      </p>
      <p class="info">
        <span class="age">{{ age || '年龄 --'}}</span>
        <span class="line">|</span>
        <span class="weight">{{ inInfo.weight?inInfo.weight+'kg':'体重 --' }}</span>
        <span class="line">|</span>
        <span class="medical">{{ inInfo.disease || '无疾病' }}</span>
      </p>
      <p class="blood-type">{{ inInfo.bloodType || '血型 --' }}</p>
    </div>
  </div>
</template>

<script setup>
import { Female,Male } from '@element-plus/icons-vue'
import { computed, ref } from 'vue'
import { getMonthNumber,fillImageUrl } from "@/utils/tool";
import imageViewer from "@/components/imageViewer/index2";
const props =defineProps({
  info: {
    default: () => ({}),
    type: Object,
  }
})
const age = ref('');
const inInfo = computed(()=>{
  let ageInfo = getMonthNumber({st: props.info?.birthday},{round:'up',dealYear: true});
  age.value = ageInfo?((ageInfo.year?ageInfo.year+'岁':'')+(ageInfo.month?ageInfo.month+'个月':'')):''
  return {
    ...props.info,
    face: fillImageUrl(props.info.face)
  }
})

</script>

<style scoped lang="scss">
.pet-card{
  border: 1px solid rgb(228, 228, 228);
  border-radius: 8px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px;
  padding: 8px;
  .pet-image{
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
  }
  .pet-info{
    margin: 0 8px;
    line-height: 20px;
    color: #8f8f8f;
    font-size: 12px;
    .name{
      color: #333333;
      font-size: 14px;
    }
    .variety{
      display: flex;
      align-items: center;
      .gender{
        font-size: 14px;
        margin: 0 4px;
      }
    }
    .info{
      .line{
        color: #8f8f8f;
        margin: 0 4px;
      }
    }
  }
}
</style>